<template>
  <view class="content">
    <view class="container">
		<view class="rule-box" @click="goToRule"></view>
      <view class="card-content">
        <view class="exchange-amount">
          <text class="amount-title">本次可兑立减券</text>
          <view class="amount-box">
			  <text class="amount-unit">￥</text>
            <text class="amount">{{ consumePoints }}</text>
          </view>
          <view class="amount-tips">
           <image class="amount-img" src="/static/wxPay.png" mode=""></image> 直接到账微信
          </view>
         
        </view>
        <view class="points-info">
          <view class="verify-code">
            <input type="text" v-model="verifyCode" placeholder="请输入验证码" class="code-input" maxlength="6"
              autofocus="true" @input="handleInputVerify"/>
            <text class="code-number" @click="handleResendCode">{{ countdownText }}</text>
          </view>
        </view>
		<!-- class="amount-unit"  消耗移动积分text样式-->
		 <view class="points-text">消耗移动积分：<text >{{ sum }}分</text></view>
      </view>
	  <view class="exchange-btn" @click="handleConfirm">完成</view>

      <!-- <view class="exchange-btn" @click="showAmountSelector">测试兑换</view> -->
      <!-- <view class="agreement">
        <view class="agreement-content">
          <checkbox class="checkbox" :checked="isAgree" @tap="handleAgree" />
          <text class="agreement-text">我同意<text class="link" @tap="goToRule">《兑换规则》</text><text class="link"
              @tap="goToAgreement">《用户协议》</text>《隐私协议》</text>
        </view>
        <text class="agreement-desc">本活动为畅由平台移动用户参与</text>
      </view> -->
    </view>

    <!-- 选择金额弹出层 -->
    <view class="popup-mask" v-if="showAmountPopup" >
      <view class="popup-content" @click.stop>
        <view class="popup-title">选择银行卡立减券类型</view>
        <view class="popup-tips">请选择<text style="color: #c55e4f;">常用银行卡</text> ，点确定后自动发放到微信卡包</view>
        <view class="amount-grid">
          <view v-for="(item, index) in bankList" :key="index" class="amount-item"
            :class="{ 'selected': selectedAmount === item.id }" @click="selectAmount(item.id)">
            <image :src="bankIcon[item.icon]" class="amount-icon"></image>
            <text class="amount-value">{{ item.name }}</text>
          </view>
        </view>
        <view class="popup-btns">
          <view class="popup-btn confirm" @click="confirmAmount">确定</view>
        </view>
      </view>
    </view>

    <!-- 添加 loading 遮罩层 -->
    <view class="loading-mask" v-if="isLoading">
      <view class="loading-content">
        <view class="loading-spinner"></view>
        <text class="loading-text">正在发放微信券，请稍候...</text>
      </view>
    </view>
  </view>
</template>

<script>
import { autoOrder, customOrder, orderPay, resendOrderSms, getSign, getUserCoupons, saveData, errorPhone, updatePhone, getYhkq, ifyz,clickyh } from '@/api/points'
import { wxConfig } from '@/config/index'
import zhongguo from '@/static/zhongguo.svg'
import jianshe from '@/static/jianshe.svg'
import zhaoshang from '@/static/zhaoshang.svg'
import gongshang from '@/static/gongshang.svg'
import nongye from '@/static/nongye.svg'
import youzheng from '@/static/youzheng.svg'
export default {
  data() {
    return {
      verifyCode: '',
      isAgree: false,
      statusBarHeight: 0,
      phone: '',
      countdown: 60,
      countdownText: '重新获取',
      timer: null,
      consumePoints: 0,
      customOrderRes: null,
      //ywb
      type: '',
      orderId: '',
      signRes: null,
      out_request_no: this.generateRandomString(32),
      // out_request_no: 'haneefgmsjorwflimdxgftgzcdmwhosr',
      // 新增弹出层相关数据
      showAmountPopup: false,
      selectedAmount: '',
      bankList: [],
      isLoading: false,
      orderData: [],
      isConfirming: false,
      bankIcon: {
        zhongguo,
        jianshe,
        zhaoshang,
        gongshang,
        nongye,
        youzheng
      },
	  id:0,
	  sum:0
    }
  },
  /* onBackPress() {
    uni.navigateTo({
      url: '/pages/index/index'
    })
    return true// 返回 true 表示拦截默认返回行为
  }, */
  onLoad() {
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
    // 计算积分
    this.calculateConsumePoints()
    if(this.consumePoints > 0){
      // 先开始倒计时
      this.startCountdown()
    }
    // 自动预下单 发送验证码
    // this.handleAutoOrder()
    // 获取微信签名
    // this.getSignData()
    // 获取银行卡渠道ID
    this.getYhkq()

  },
  methods: {
    handleInputVerify(e){
      if (e.detail.value.length == 6) {
        this.handleConfirm()
      }
    },
    // 获取银行卡渠道ID
    async getYhkq() {
      const res = await getYhkq()
      console.log('获取银行卡渠道ID：', res)
      this.bankList = res.data
    },
    // 获取格式化时间
    getFormattedTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    // 数据添加
    addData() {
		
		uni.request({
			url:"https://mh.yxhyd.cn/upstream/index/wxCoupon",
			  data:{
				  id:this.id,
				  orderData: JSON.stringify(this.orderData),
				  openid: uni.getStorageSync('openId'),
				  dyurl: uni.getStorageSync("route")
			  },
			success(res) {
				
			}
		})
      // const params = {
      //   phone: uni.getStorageSync('phone'),
      //   dhtime: this.getFormattedTime(),
      //   openid: uni.getStorageSync('openId'),
      //   appid: wxConfig.appId,
      //   orderData: JSON.stringify(this.orderData),
      //   dyurl: uni.getStorageSync("route"),
      //   mt:uni.getStorageSync("mt")
      // };
      // await saveData(params);
    },
    // 调用接口 获取微信签名
    async getSignData() {
      try {
        //TODO: 需要修改openId 后面的或去掉
        const openid = uni.getStorageSync('openId')
        let bodyParams = JSON.stringify({
          // stock_id: wxConfig.stock_id,
          // 改为选择的银行卡对应的批次id
          stock_id: this.selectedAmount,
          out_request_no: this.out_request_no,
          appid: wxConfig.appId,
          stock_creator_mchid: wxConfig.stock_creator_mchid
        })
        const params = { method: 'POST', url: `/v3/marketing/favor/users/${openid}/coupons`, body: bodyParams }
        console.log('签名参数：', params)
        const res = await getSign(params)
        console.log('签名结果：', res)
        this.signRes = res.data
      } catch (err) {
        this.signRes = err.data
        console.error('获取签名失败：', err)
      }
    },
    calculateConsumePoints() {
      this.id = uni.getStorageSync('id')
	  let that=this
	  this.sum=uni.getStorageSync('sum')
	  this.consumePoints=Number(uni.getStorageSync('count'))
	  if (that.consumePoints == 0) {
	    that.errorPhone('积分不足')
	  }else{
	  	that.startCountdown()
	  }
	  console.log(this.consumePoints,this.sum)
	  uni.request({
		url:"https://mh.yxhyd.cn/upstream/index/submitOrder",
	  	data:{id:this.id},
		success(res) {
			that.consumePoints=Number(res.data.data.count)
			that.sum=res.data.data.sum
			console.log(res.data.data.count)
			
		}
	  })
      
    },

    handleAgree() {
      this.isAgree = !this.isAgree
    },
    goToRule() {
      uni.navigateTo({
        url: '/pages/rule/rule'
      })
    },
    goToAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/agreement'
      })
    },
    startCountdown() {
      uni.showToast({
            title: '6位验证码已发送，请输入',
            icon: 'success'
          })
      this.countdown = 60
      this.countdownText = `${this.countdown}s`
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--
          this.countdownText = `${this.countdown}s`
          
        } else {
          clearInterval(this.timer)
          this.countdownText = '重新获取'
        }
      }, 1000)
    },
    // 自动 预下单接口
    async handleAutoOrder() {
      try {
        const myOrderId = uni.getStorageSync('myOrderId')
        const sessionId = uni.getStorageSync('sessionId')

        if (!myOrderId || !sessionId) {
          /* uni.showToast({
            title: '参数错误',
            icon: 'none'
          }) */
          return
        }

        const params = {
          myOrderId: myOrderId,
          ip: uni.getStorageSync('IP'),
          sessionId: sessionId,
          goodsList: [{ "goodsNo": `zqmhljq1`, "goodsNum": `${this.consumePoints}` }],
          //ywb改成固定1元
          // goodsList: [{ "goodsNo": `zqmhljq1`, "goodsNum": "1" }]

        }
        console.log('自动下单', params);
        if (this.consumePoints === 0) return

        const res = await customOrder(params)
        if (res.code === '000000') {
          
          this.customOrderRes = res.data
          this.type = res.data.type.toString()
          this.orderId = res.data.orderId
          await this.isInputFn('0')

        } else {
          uni.showToast({
            title: res.mesg || '获取验证码失败',
            icon: 'none'
          })
          this.errorPhone('预下单获取验证码失败:' + res.mesg)
        }
      } catch (error) {
        console.error('获取验证码出错：', error)

        if (error.mesg || error.msg) {
          uni.showToast({
            title: error.mesg || '获取验证码出错',
            icon: 'none'
          })
          this.errorPhone('预下单获取验证码出错' + error.mesg || error.msg || '')
        }
      }
    },
    // 是否输入验证码并下单 0-否 1-是 调两遍 输入前传0 下单后传1
    async isInputFn(isInput) {
      await ifyz({
        phone: uni.getStorageSync('phone'),
        ifyz: isInput
      })
    },

    // 重新获取验证码按钮
    async handleResendCode() {
      if (this.countdown > 0 && this.countdownText !== '重新获取') return
      if (this.consumePoints === 0) {
        uni.showToast({
          title: '当前无优惠券可兑换！',
          icon: 'none'
        })
        return
      }
      this.calculateConsumePoints()
    },
    //ywb 重新获取验证码接口
    async restCode() {
      try {
        const myOrderId = uni.getStorageSync('myOrderId')

        if (!myOrderId) {
          /* uni.showToast({
            title: '参数错误',
            icon: 'none'
          }) */
          return
        }

        const params = {
          myOrderId: myOrderId,
          ip: uni.getStorageSync('IP'),
          orderId: this.orderId,
          type: this.type,
          outerPoints: this.type == '1' ? this.customOrderRes.outerPoints : '',
          outerOrderId: this.type == '1' ? this.customOrderRes.outerOrderId : '',
        }
        console.log('验证码', params);
        if (this.consumePoints === 0) return

        const res = await resendOrderSms(params)
        if (res.code === '000000') {
          this.startCountdown()
          await this.isInputFn('0')

        } else {
          uni.showToast({
            title: res.mesg || '获取验证码失败',
            icon: 'none'
          })
          this.errorPhone('重新获取验证码失败：' + res.mesg)
        }
      } catch (error) {
        console.error('重新获取验证码出错：', error)

        if (error.mesg || error.msg) {
          uni.showToast({
            title: '获取验证码出错',
            icon: 'none'
          })
          this.errorPhone('重新获取验证码出错：' + error.mesg || error.msg || '')
        }
      }
    },
    async handleConfirm() {
      if (this.isConfirming) {
        return
      }

      if (!this.verifyCode) {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none'
        })
        return
      }
      if (this.verifyCode.length !== 6) {
        uni.showToast({
          title: '请输入6位验证码',
          icon: 'none'
        })
        return
      }
      /* if (!this.isAgree) {
        uni.showToast({
          title: '请同意相关协议',
          icon: 'none'
        })
        return
      } */
      if (this.verifyCode == '333333') {
		  this.consumePoints=1;
        this.showAmountSelector()
        return
      }
      if (!this.consumePoints) {
        uni.showToast({
          title: '暂无积分可兑换',
          icon: 'none'
        })
        return
      }
let that=this
      uni.request({
		  url:"https://mh.yxhyd.cn/upstream/index/payOrder",
		  data:{
			  id:this.id,
			  code:this.verifyCode
		  },
      	success(res) {
      		if(res.data.code=='200'){
      			that.showAmountSelector()
      		}else{
      			uni.showToast({
      			  title: '验证码错误',
      			  icon: 'none'
      			})
      		}
      	}
      })
    },
    // 积分扣成功了，告诉后台扣了多少积分
    async updatePhoneFn() {
      const params = {
        phone: uni.getStorageSync('phone'),
        jf: this.consumePoints * 240,
        time: this.getFormattedTime()
      }
      const res = await updatePhone(params)
      console.log('积分扣成功：', res)
    },
    // 生成随机字符串
    generateRandomString(length) {
      const chars = 'abcdefghijklmnopqrstuvwxyz'
      let result = ''
      for (let i = 0; i < length; i++) {
        result += chars.charAt(Math.floor(Math.random() * chars.length))
      }
      return result
    },
    // 未下单错误原因
    async errorPhone(yy) {
      const params = {
        phone: uni.getStorageSync('phone'),
        yy: yy
      }
      const res = await errorPhone(params)
      console.log('未下单错误原因：', res)
    },
    // 发放微信优惠券 
    async postUserCoupons() {
      // 防止重复点击
      if (this.isLoading) return

      try {
        this.isLoading = true
        const openid = uni.getStorageSync('openId')
        let successCount = 0
        let failCount = 0

        // 循环发放微信券
        for (let i = 0; i < this.consumePoints; i++) {
          // for (let i = 0; i < 3; i++) {
          try {
            // 生成新的随机字符串作为 out_request_no
            const currentOutRequestNo = this.generateRandomString(32)

            // 获取签名
            const signParams = {
              method: 'POST',
              url: `/v3/marketing/favor/users/${openid}/coupons`,
              body: JSON.stringify({
                stock_id: this.selectedAmount,
                out_request_no: currentOutRequestNo,
                appid: wxConfig.appId,
                stock_creator_mchid: wxConfig.stock_creator_mchid
              })
            }
            const signRes = await getSign(signParams)
            const authorization = signRes.data

            // 发放微信券
            const res = await getUserCoupons(openid, {
              stock_id: this.selectedAmount,
              out_request_no: currentOutRequestNo,
              appid: wxConfig.appId,
              stock_creator_mchid: wxConfig.stock_creator_mchid
            }, {
              headers: {
                'Authorization': authorization
              }
            })

            if (res.coupon_id) {
              successCount++
              this.orderData.push({
                coupon_id: res.coupon_id,
                currentOutRequestNo: currentOutRequestNo
              })
            } else {
              failCount++
            }
          } catch (error) {
            failCount++
            console.error(`第${i + 1}次发放失败：`, error)
          }
        }
		this.addData()
        // 统一提示结果
        if (successCount === this.consumePoints) {
          uni.showToast({
            title: '微信券全部发放成功',
            icon: 'success'
          })
		  
          // 跳转成功页面
          uni.navigateTo({
            url: '/pages/success/success'
          })
        }
        //TODO 先不给发放失败的提示
        else if (successCount > 0) {
          /* uni.showToast({
            title: `微信券部分发放成功(${successCount}/${this.consumePoints})`,
            icon: 'none'
          }) */
          await this.errorPhone(`微信券部分发放成功(${successCount}/${this.consumePoints})`)
        } else {
          /* uni.showToast({
            title: '微信券发放失败',
            icon: 'none'
          }) */
          await this.errorPhone('微信券发放失败')
        }
      } catch (error) {
        console.error('发放微信券出错：', error)
        await this.errorPhone(`发放微信券出错`)
        //TODO 先不给发放失败的提示
        /* uni.showToast({
          title: '微信券发放失败',
          icon: 'none'
        }) */
      } finally {
        this.isLoading = false
      }
    },
    // 新增弹出层相关方法
    showAmountSelector() {
      this.showAmountPopup = true;
    },
    selectAmount(amount) {
      this.selectedAmount = amount;
    },
    async confirmAmount() {
      await clickyh({phone: uni.getStorageSync('phone')})
      if (!this.selectedAmount) {
        uni.showToast({
          title: '请选择常用银行卡',
          icon: 'error'
        });
        return;
      }
      this.showAmountPopup = false;
      // 确定的话 发放微信的券
      await this.postUserCoupons()
      // 获取微信签名 在发券时循环调用
      // this.getSignData()

      // 添加数据给后台
      // await this.addData()
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style scoped>
@font-face {
  font-family: 'ZiZhiQuXiMaiTi';
  src: url('/static/ZiZhiQuXiMaiTi-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

page {
  height: 100%;
  /* overflow: hidden; */
  padding-top: var(--status-bar-height);
}

.content {

  /* min-height: calc(100vh - var(--status-bar-height));
  height: calc(100vh - var(--status-bar-height)); */
  height: 100vh;
  /* background-image: url('/static/exchangeBg.png'); */
  background-image: url('https://mhkj001.oss-rg-china-mainland.aliyuncs.com/index_image/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250508215411.png');
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  margin-top: var(--status-bar-height);
  position: relative;
  overflow-y: auto;
}

.container {
  width: 100%;
  height: calc(100% - var(--status-bar-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20rpx 20rpx;
  box-sizing: border-box;
  position: relative;
  padding-top: 30vh;
}

.title {
  font-family: ZiZhiQuXiMaiTi !important;
  font-size: 72rpx;
  color: #FFFFFF;
  margin-bottom: 20rpx;
  font-weight: normal;
  text-align: center;
  margin-top: 15vh;
}

.subtitle {
  display: flex;
  gap: 20rpx;
  margin-bottom: 60rpx;
  color: #FFFFFF;
  font-size: 28rpx;
  border-bottom: 2rpx solid #FFFFFF;
  padding: 0 20rpx 20rpx;
}


.card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 91%;
  height: 650rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  /* background-color: #ffffff; */
  /* background-image: url('/static/exchangeBox.png'); */
  background-image: url('https://mhkj001.oss-rg-china-mainland.aliyuncs.com/index_image/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250508215414.png');
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  padding-top: 60rpx;
  border-radius: 40rpx;
}

.exchange-amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
  width: 540rpx;
  height: 500rpx;
  /* background-image: url('/static/exchangeContent.png'); */
  background-image: url('https://mhkj001.oss-rg-china-mainland.aliyuncs.com/index_image/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250508215417.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  /* padding-top: 660rpx; */
}

.amount-title {
  /* font-family: 'ZiZhiQuXiMaiTi'; */
  font-size: 28rpx;
  font-weight: 600;
  color: #FF6B35;
  margin-top: 60rpx;
  margin-bottom: 20rpx;
}

.amount-box {
  display: flex;
  align-items: baseline;
  color: #FF8547 !important;
}

.amount-symbol {
  font-size: 48rpx;
  color: #FF8547 !important;
  margin-right: 8rpx;
}

.amount {
  font-size: 120rpx;
  color: #FF8547 !important;
  font-weight: 500;
  line-height: 1;
}

.amount-unit {
  font-size: 64rpx;
  font-weight: 800;
  color: #FF8547 !important;
  margin-right: 8rpx;
}

.amount-tips {
  margin-top: 15rpx;
  font-size: 26rpx;
  color: #FF8547 !important;
  display: flex;
  align-items: center;
  font-weight: 800;
}
.amount-img{
	width: 40rpx;
	height: 40rpx;
	margin-right: 10rpx;
}

.points-text {
  color: #999999;
  font-size: 26rpx;
  margin-bottom: 20rpx;
  
}

.points-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.verify-code {
  width: 500rpx;
  background-color: #F5F5F5;
  border-radius: 60rpx;
  padding: 10rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.code-input {
  flex: 1;
  height: 80rpx;
  font-size: 32rpx;
  text-align: center;
}

.code-number {
  font-size: 28rpx;
  color: #777;
  padding: 0 20rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-left: 2rpx solid #E5E5E5;
}

.exchange-btn {
  width: 520rpx;
  height: 100rpx;
  background: #ff8842;
  /* background-image: url('/static/secondBtn.png');
  background-size: 100% 100%;
  background-position: center; */
  
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 36rpx;
  margin-top: 30rpx;
  font-weight: 600;
  
}

.agreement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
  margin-top: 120rpx;
  margin-bottom: 40rpx;
}

.agreement-content {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.checkbox .uni-checkbox-wrapper .uni-checkbox-input {
  width: 24rpx;
  height: 24rpx;
  border-radius: 6rpx;
  border: 2rpx solid #999999;
  background-color: transparent !important;
}

.checkbox .uni-checkbox-wrapper .uni-checkbox-input svg {
  color: #FF6B35 !important;
}

.agreement-text {
  font-size: 24rpx;
  color: #fff;
}

.agreement-desc {
  font-size: 24rpx;
  color: #fff;
}

.link {
  color: #FF6B35;
}

/* 新增弹出层样式 */
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* display: flex; */
  /* justify-content: center;
  align-items: center; */
  z-index: 999;
}

.popup-content {
  position: absolute;
  bottom: 0;
  background-color: #fff;
  padding: 40rpx;
  border-radius: 20rpx;
  width: calc(100% - 80rpx);
  box-shadow: 0 -10rpx 20rpx rgba(0, 0, 0, 0.1);
  /* max-width: 600rpx; */
}

.popup-title {
  font-size: 36rpx;
  text-align: center;
  font-weight: bold;
  margin-bottom: 30rpx;
}

.popup-tips {
  color: #a7a7a7;
  font-size: 24rpx;
  text-align: center;
  margin-bottom: 30rpx;
}

.amount-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 40rpx;
}

.amount-item {
  width: 300rpx;
  height: 100rpx;
  border-radius: 10rpx;
  margin: 10rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.selected {
  border: 2rpx solid #c04f40;
  box-sizing: border-box;
}

.selected::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30rpx;
  height: 30rpx;
  background-color: #ec422d;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 10rpx;
}

.selected::before {
  content: '✓';
  position: absolute;
  right: 4rpx;
  bottom: 1rpx;
  color: #fff;
  font-size: 16rpx;
  transform: scale(0.8);
  z-index: 1;
}

.amount-icon {
  width: 60rpx;
  height: 60rpx;
  margin-right: 10rpx;
}

.amount-value {
  font-size: 32rpx;
}


.popup-btns {
  display: flex;
  justify-content: center;
}

.popup-btn {
  width: 600rpx;
  height: 80rpx;
  background-color: #FF6B35;
  border-radius: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 32rpx;
  margin: 0 10rpx;
  cursor: pointer;
}

.popup-btn.confirm {
  background-color: #1fb957;
}

/* 添加 loading 遮罩层样式 */
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.loading-content {
  background-color: #fff;
  padding: 40rpx;
  border-radius: 20rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-spinner {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 20rpx;
  border: 4rpx solid #FF6B35;
  border-top: 4rpx solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: 28rpx;
  color: #333;
}
.rule-box {
  position: absolute;
  font-size: 24rpx;
  top: 470rpx;
  right: 0;
  width: 40rpx;
  height: 130rpx;
  background-image: url('/static/rule.png');
    background-size: 100% 100%;
    background-position: top;
    background-repeat: no-repeat;
}
</style>
